<template>
  <div id="main">
    <div class="product" v-if="isShow">
      <div class="header">
        <van-icon class="back" name="arrow-left" size="0.18rem"  @click="isShow=false" />
        <div class="top">
          <van-icon class="icon" color="#373737" size="0.2rem" name="search" />
          <input
            type="text"
            style="color: #333"
            class="inp"
            :placeholder="check"
            v-model="check"
            @keyup.enter="handleChange"
          />
          <van-icon
            name="clear"
            class="clear"
            color="#ccc"
            @click="isShow = false"
          />
        </div>
      </div>
      <div class="probody">
        <div class="sort" v-for="(ite, i) in filters" :key="i"  @click="detal(ite.id)">
          <img :src="'https://mfs.ys7.com/' + ite.img" alt="" />
          <div class="content">
            <h1>
              {{ ite.name }}
            </h1>
            <h2>{{ ite.brief }}</h2>
            <div class="price">
              <h3>
                ￥<span>{{ ite.lowprice }}</span
                ><b>起</b>
              </h3>
              <h4>
                ￥<em>{{ ite.highprice }}</em>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="header">
        <van-icon class="icon" color="#373737" size="0.2rem" name="search" />
        <input
          type="text"
          name=""
          id=""
          placeholder="搜索商品"
          @keyup.enter="handleChange"
          v-model="check"
        />
        <span  @click="handleBackPage">取消</span>
      </div>
      <div class="search">
        <p>
          <img
            src="https://statics.ys7.com/newmall/mobile/images/home/fire@3x.png?1594711458"
            alt=""
          />
          热搜推荐
        </p>
        <div class="first" v-for="(it,ind) in thisData" :key="ind" @click="detal(it.good.goods_id)">
          <b>{{ind+1}}</b>
          <img
            :src="'https://mfs.ys7.com/'+it.good.image_url"
            alt=""
          />
          <em>{{it.good.name}}</em>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
import instance from "../utils/request";
export default {
  data() {
    return {
      value: "",
      tabs: "",
      goods: [],
      check: "手机",
      datas: [],
      filters: [],
      isShow: 0,
      thisData:[]
    };
  },
  created() {
    instance.get("/yingshi/goods/ListApi?t=1635908732325&position=hot_recommend").then((res) => {
      this.thisData=res.data.data.submenu[0].relate
    })
    
  },
  methods: {
    detal(i) {
      this.$router.push(`/detail/${i}`);
    },
  handleChange(){
    if(this.check){
      this.isShow=true
      this.filters=[]
      this.datas=[]
      this.goods=[]
      request.get("/yingshi/default/index-h5").then((resd) => {
      this.tabs = resd.data.data.tabs;
      this.tabs.forEach((itm) => {
        itm.data[0].data.goods.forEach((it) => {
          this.goods.push(it);
        });
      });
      this.goods.forEach((res) => {
        this.datas.push({
          name: res.good.name,
          brief: res.good.brief,
          id: res.good.goodsId,
          img: res.good.imageUrl,
          highprice: res.price.high,
          lowprice: res.price.low,
        });
      });
      this.datas.forEach((re) => {
        if (re.name.includes(this.check)) {
          this.filters.push(re);
        }
      });
    });
    }
  }
  },
    
};
</script>

<style src="../assets/css/search.css" scoped></style>